<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>历史排名 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .back {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            position: absolute;
            left: 0;
        }
        
        .back:hover {
            transform: translateX(-5px);
        }
        
        .back span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>') no-repeat center;
            background-size: contain;
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .right_div {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .right_div a {
            display: block;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .right_div a:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        /* 主内容区域 */
        #content_div-j {
            max-width: 800px;
            margin: 20px auto;
            padding: 15px;
        }
        
        /* 筛选区域 */
        .filter-container {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
        
        .filter-button {
            flex: 1;
            min-width: 120px;
            padding: 12px;
            background: white;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .filter-button:hover, .filter-button.active {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        /* 排名卡片 */
        .ranking-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.5s forwards;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .ranking-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .ranking-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #6a11cb, #2575fc);
        }
        
        .ranking-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: #f8fbff;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .ranking-period {
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .ranking-period i {
            color: #6a11cb;
        }
        
        .ranking-tag {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }
        
        .tag-latest {
            background: linear-gradient(135deg, #ff3b30, #ff9500);
            color: white;
        }
        
        .tag-regular {
            background: #f0f5ff;
            color: #2575fc;
        }
        
        .ranking-content {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .rank-badge {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            color: white;
            position: relative;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .rank-1 {
            background: linear-gradient(135deg, #FFD700, #FFA500);
        }
        
        .rank-2 {
            background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
        }
        
        .rank-3 {
            background: linear-gradient(135deg, #CD7F32, #8B4513);
        }
        
        .rank-other {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
        }
        
        .ranking-info {
            flex: 1;
        }
        
        .ranking-position {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .ranking-score {
            font-size: 16px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        
        .ranking-stats {
            display: flex;
            gap: 15px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #7f8c8d;
            background: #f8f9ff;
            padding: 6px 12px;
            border-radius: 20px;
        }
        
        .stat-item i {
            color: #2575fc;
        }
        
        .ranking-note {
            padding: 15px;
            background: #f8fbff;
            border-radius: 8px;
            margin: 15px 15px 0;
            font-size: 14px;
            color: #ff3b30;
            border-left: 3px solid #ff3b30;
        }
        
        .ranking-note i {
            margin-right: 5px;
        }
        
        .ranking-actions {
            display: flex;
            justify-content: flex-end;
            padding: 15px 20px;
            border-top: 1px solid #f0f5ff;
        }
        
        .view-details {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 8px 20px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .view-details:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        /* 说明弹窗样式 */
        .instructions-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .modal-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
        
        .modal-content {
            position: relative;
            background: white;
            border-radius: 20px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            z-index: 1001;
            animation: slideUp 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }
        
        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            padding: 20px;
            border-radius: 20px 20px 0 0;
            text-align: center;
        }
        
        .modal-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .modal-body {
            padding: 25px;
        }
        
        .instruction-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .instruction-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .instruction-item h4 {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .instruction-item h4 i {
            width: 32px;
            height: 32px;
            background: #f0f5ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2575fc;
        }
        
        .instruction-item p {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
            padding-left: 42px;
        }
        
        .modal-close {
            display: block;
            width: 90%;
            margin: 20px auto;
            padding: 14px;
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .modal-close:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 50px 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            display: none;
        }
        
        .empty-state i {
            font-size: 60px;
            color: #e0e6ff;
            margin-bottom: 20px;
        }
        
        .empty-state h3 {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .empty-state p {
            font-size: 14px;
            color: #7f8c8d;
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .filter-container {
                flex-direction: column;
            }
            
            .ranking-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .ranking-content {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .ranking-stats {
                flex-direction: column;
                gap: 8px;
            }
            
            .stat-item {
                width: 100%;
            }
            
            .modal-content {
                width: 95%;
            }
        }
        
        /* 卡片延迟动画 */
        .ranking-card:nth-child(1) { animation-delay: 0.2s; }
        .ranking-card:nth-child(2) { animation-delay: 0.3s; }
        .ranking-card:nth-child(3) { animation-delay: 0.4s; }
        .ranking-card:nth-child(4) { animation-delay: 0.5s; }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <a href="javascript:history.go(-1);" class="back">
                <span></span>
            </a> 
            <div class="top_tit">历史排名</div>
            <div class="right_div">
                <a href="#" id="showInstructions">说明</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div id="content_div-j">
        <!-- 筛选区域 -->
        <div class="filter-container">
            <button class="filter-button active" data-filter="all">全部排名</button>
            <button class="filter-button" data-filter="current">本月排名</button>
            <button class="filter-button" data-filter="top10">前十名</button>
            <button class="filter-button" data-filter="my">我的排名</button>
        </div>
        
        <!-- 空状态提示 -->
        <div class="empty-state" id="emptyState">
            <i class="fas fa-trophy"></i>
            <h3>暂无相关排名记录</h3>
            <p>请选择其他筛选条件或参与答题获取排名</p>
        </div>
        
        <!-- 排名卡片 - 最新一期 -->
        <div class="ranking-card" data-type="current" data-rank="1">
            <div class="ranking-header">
                <div class="ranking-period">
                    <i class="fas fa-calendar-alt"></i>
                    03-24期 (本周)
                </div>
                <div class="ranking-tag tag-latest">最新排名</div>
            </div>
            
            <div class="ranking-content">
                <div class="rank-badge rank-1">
                    <i class="fas fa-crown"></i>
                </div>
                
                <div class="ranking-info">
                    <div class="ranking-position">第1名</div>
                    <div class="ranking-score">得分：9850分</div>
                    
                    <div class="ranking-stats">
                        <div class="stat-item">
                            <i class="fas fa-check-circle"></i>
                            正确率：98%
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bolt"></i>
                            答题速度：0.8秒/题
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-trophy"></i>
                            击败用户：99.8%
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ranking-note">
                <i class="fas fa-info-circle"></i>
                备注：当前为最新一期排名，距离结算还有2天
            </div>
            
            <div class="ranking-actions">
                <button class="view-details">
                    查看详情
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
        
        <!-- 排名卡片 - 历史记录 -->
        <div class="ranking-card" data-type="history" data-rank="2">
            <div class="ranking-header">
                <div class="ranking-period">
                    <i class="fas fa-calendar-alt"></i>
                    03-17期
                </div>
                <div class="ranking-tag tag-regular">历史排名</div>
            </div>
            
            <div class="ranking-content">
                <div class="rank-badge rank-2">
                    2
                </div>
                
                <div class="ranking-info">
                    <div class="ranking-position">第2名</div>
                    <div class="ranking-score">得分：9620分</div>
                    
                    <div class="ranking-stats">
                        <div class="stat-item">
                            <i class="fas fa-check-circle"></i>
                            正确率：97%
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bolt"></i>
                            答题速度：0.9秒/题
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-trophy"></i>
                            击败用户：99.5%
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ranking-actions">
                <button class="view-details">
                    查看详情
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
        
        <!-- 排名卡片 - 历史记录 -->
        <div class="ranking-card" data-type="history" data-rank="3">
            <div class="ranking-header">
                <div class="ranking-period">
                    <i class="fas fa-calendar-alt"></i>
                    03-10期
                </div>
                <div class="ranking-tag tag-regular">历史排名</div>
            </div>
            
            <div class="ranking-content">
                <div class="rank-badge rank-3">
                    3
                </div>
                
                <div class="ranking-info">
                    <div class="ranking-position">第3名</div>
                    <div class="ranking-score">得分：9480分</div>
                    
                    <div class="ranking-stats">
                        <div class="stat-item">
                            <i class="fas fa-check-circle"></i>
                            正确率：96%
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bolt"></i>
                            答题速度：1.0秒/题
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-trophy"></i>
                            击败用户：99.2%
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ranking-actions">
                <button class="view-details">
                    查看详情
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
        
        <!-- 排名卡片 - 历史记录 -->
        <div class="ranking-card" data-type="history" data-rank="5">
            <div class="ranking-header">
                <div class="ranking-period">
                    <i class="fas fa-calendar-alt"></i>
                    03-03期
                </div>
                <div class="ranking-tag tag-regular">历史排名</div>
            </div>
            
            <div class="ranking-content">
                <div class="rank-badge rank-other">
                    5
                </div>
                
                <div class="ranking-info">
                    <div class="ranking-position">第5名</div>
                    <div class="ranking-score">得分：9250分</div>
                    
                    <div class="ranking-stats">
                        <div class="stat-item">
                            <i class="fas fa-check-circle"></i>
                            正确率：95%
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-bolt"></i>
                            答题速度：1.1秒/题
                        </div>
                        <div class="stat-item">
                            <i class="fas fa-trophy"></i>
                            击败用户：98.7%
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ranking-actions">
                <button class="view-details">
                    查看详情
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 说明弹窗 -->
    <div class="instructions-modal" id="instructionsModal">
        <div class="modal-mask" id="closeModal"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">排名说明</h3>
                <p>了解我们的排名规则与计算方式</p>
            </div>
            
            <div class="modal-body">
                <div class="instruction-item">
                    <h4><i class="fas fa-calculator"></i> 排名计算规则</h4>
                    <p>排名根据答题得分综合计算，包括正确率、答题速度和完成时间等因素。每答对一题获得基础分，连续答对可获得额外积分加成。</p>
                </div>
                
                <div class="instruction-item">
                    <h4><i class="fas fa-chart-line"></i> 积分系统</h4>
                    <p>基础得分：每答对一题获得100分；速度加成：答题时间低于1秒额外获得50%加成；连对奖励：连续答对5题后每多答对一题增加10%奖励分。</p>
                </div>
                
                <div class="instruction-item">
                    <h4><i class="fas fa-calendar-week"></i> 排名周期</h4>
                    <p>每周为一期排名周期，每周一00:00重置排名并开始新一期排名。历史排名记录将永久保存，您可随时查看过去的排名表现和成绩。</p>
                </div>
                
                <div class="instruction-item">
                    <h4><i class="fas fa-gift"></i> 排名奖励</h4>
                    <p>每周排名前10名用户将获得不同级别的奖励：第1名100元现金，第2-3名50元现金，第4-10名20元现金。奖励在排名结束后24小时内发放。</p>
                </div>
                
                <div class="instruction-item">
                    <h4><i class="fas fa-exclamation-triangle"></i> 注意事项</h4>
                    <p>禁止任何作弊行为，包括但不限于使用脚本、多开账号、互相刷分等。一经发现将取消排名资格并清空历史记录，严重者将封禁账号。</p>
                </div>
            </div>
            
            <button class="modal-close" id="closeModalBtn">我知道了</button>
        </div>
    </div>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            const modal = document.getElementById('instructionsModal');
            const showBtn = document.getElementById('showInstructions');
            const closeBtn = document.getElementById('closeModalBtn');
            const mask = document.getElementById('closeModal');
            const filterButtons = document.querySelectorAll('.filter-button');
            const rankingCards = document.querySelectorAll('.ranking-card');
            const emptyState = document.getElementById('emptyState');
            
            // 显示弹窗
            showBtn.addEventListener('click', function(e) {
                e.preventDefault();
                modal.style.display = 'flex';
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭弹窗
            function closeModal() {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
            
            closeBtn.addEventListener('click', closeModal);
            mask.addEventListener('click', closeModal);
            
            // 筛选按钮交互
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有按钮的active状态
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    
                    // 添加当前按钮active状态
                    this.classList.add('active');
                    
                    // 获取筛选条件
                    const filter = this.getAttribute('data-filter');
                    
                    // 筛选卡片
                    let hasMatch = false;
                    rankingCards.forEach(card => {
                        const cardType = card.getAttribute('data-type');
                        const cardRank = parseInt(card.getAttribute('data-rank'));
                        
                        if (filter === 'all') {
                            card.style.display = 'block';
                            hasMatch = true;
                        } 
                        else if (filter === 'current' && cardType === 'current') {
                            card.style.display = 'block';
                            hasMatch = true;
                        } 
                        else if (filter === 'top10' && cardRank <= 10) {
                            card.style.display = 'block';
                            hasMatch = true;
                        } 
                        else if (filter === 'my' && cardRank <= 5) {
                            card.style.display = 'block';
                            hasMatch = true;
                        } 
                        else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 显示空状态或隐藏
                    emptyState.style.display = hasMatch ? 'none' : 'block';
                    
                    // 添加动画效果
                    if (hasMatch) {
                        rankingCards.forEach(card => {
                            if (card.style.display === 'block') {
                                card.style.animation = 'fadeInUp 0.5s forwards';
                            }
                        });
                    }
                });
            });
            
            // 查看详情按钮交互
            const viewButtons = document.querySelectorAll('.view-details');
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.ranking-card');
                    const period = card.querySelector('.ranking-period').textContent.trim();
                    
                    // 添加点击效果
                    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                    button.disabled = true;
                    
                    setTimeout(() => {
                        // 模拟加载完成
                        button.innerHTML = '查看详情 <i class="fas fa-arrow-right"></i>';
                        button.disabled = false;
                        
                        // 显示提示信息
                        alert(`即将查看 ${period} 的详细排名信息`);
                    }, 800);
                });
            });
            
            // 添加卡片悬停效果
            rankingCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
        });
    </script>
</body>
</html>